<template>

	<el-table :data="tableData.sc" :border="parentBorder" style="width: 100%">
		<el-table-column label="custmerId" prop="custmerId" />
		<el-table-column label="custmerName" prop="custmerName" />
		<el-table-column fixed="right" label="操作" width="120" header-align="center">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="selectRow((scope.row))">
					查看所有联系人
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<!-- 查看所有联系人 -->
	<el-dialog v-model="dialogVisible" title="查看所有联系人" width="50%" align-center draggable scroll="true">
		<el-table :data="form.sc" style="width: 100%" max-height="580">
			<el-table-column fixed prop="contactId" label="客户编号" width="90" />
			<el-table-column prop="contactName" label="联系人姓名" width="120" />
			<el-table-column prop="contactSex" label="性别" width="70" />
			<el-table-column prop="contactJob" label="职位" width="70" />
			<el-table-column prop="contactPhone" label="办公电话" width="120" />
			<el-table-column prop="contactRemark" label="备注" width="120" />
		
			<el-table-column fixed="right" label="操作" width="98" header-align="center">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="updateRow((scope.row))">
						修改
					</el-button>
					<el-button link type="primary" size="small" @click="deleteRow((scope.row))">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-form-item>
			<el-button type="primary" style="width: 100%" @click="onSubmit">新增</el-button>
		</el-form-item>
	
	</el-dialog>
	
	<!-- 添加联系人 -->
	<el-dialog v-model="dialogVisible2" title="添加联系人" width="30%" align-center draggable scroll="true">
		<el-form v-model="testForm" label-width="27%">
			<el-form-item label="名字">
				<el-input v-model="testForm.contactName" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="性别">
				<el-input v-model="testForm.contactSex" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="工作">
				<el-input v-model="testForm.contactJob" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="手机">
				<el-input v-model="testForm.contactPhone" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="testForm.contactRemark" placeholder="请选择名字" style="width: 220px;" />
			</el-form-item>
		
			
			
			<el-form-item>
				<el-button type="primary" @click="onSubmit2">提交</el-button>
			</el-form-item>
		</el-form>
	
	</el-dialog>
	
	
	
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import axios from 'axios'
	import qs from 'qs'

	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)
	const tableData = reactive({});
	const form = reactive({});
	const testForm = reactive({
		contactId: '',
		contactName: '',
		contactSex: '',
		contactJob: '',
		contactPhone: '',
		contactRemark: '',
	});
	
	
	const query = () => {
		axios.post("http://localhost:8080/custmer/list", qs.stringify(tableData.qq)).then(res => {
			tableData.sc = res.data.list;
		})
	
	}
	query()
	
	const selectRow = (row) => {
		console.log(row.custmerName)
		dialogVisible.value = true;
		axios.post("http://localhost:8080/contact/list", qs.stringify(row)).then(res => {
			form.sc = res.data.list;
		})
	}
	
	
	const onSubmit = () => {
		dialogVisible.value = false;
		dialogVisible2.value = true;
	}
	
	const onSubmit2 = () => {
		axios.post("http://localhost:8080/contact/add", qs.stringify(testForm)).then(res => {
			if(res.data.msg == 'success'){
					 alert("成功！")
			}else{
					 alert("错误！")
			}
		})
	}
	
	
	
</script>
